<!DOCTYPE html>
<html>
<head>
    <title>台风描述</title>
    <meta charset="utf-8">
    <link href="./css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
  <span>
  <table class="list_table">
    <tr>
      <th>UTC</th>
      <th>UTC+8</th>
      <th>lat</th>
      <th>lon</th>
      <th>pressure</th>
      <th>scale</th>
      <th>ID</th>
      <th>移向</th>
      <th>DIR</th>
      <th>TSID</th>
      <th>TSCNAME</th>
      <th>TSENAME</th>
    </tr>
    <tr v-for="TC in remoteList" v-on:click="addNewItem(TC)">
      <td>{{TC.uyear}}-{{TC.umonth}}-{{TC.uday}}-{{TC.uhour}}</td>
      <td>{{TC.date}}日{{TC.hour}}时</td>
      <td>{{TC.lat}}</td>
      <td>{{TC.lon}}</td>
      <td>{{TC.pressure}}hPa</td>
      <td>{{TC.rankEN}}</td>
      <td>{{TC.ID}}</td>
      <td>{{TC.moveDir}}</td>
      <td>{{TC.direction}}</td>
      <td>{{TC.TSID}}</td> 
      <td>{{TC.TSCNAME}}</td> 
      <td>{{TC.TSENAME}}</td>      
    </tr>
  </table>
  </span>

  <span>
  <div class=tool_bar><a title="新建描述" class="button" v-on:click="addNewItem">add+</a>
  开始时间<input v-model="startTime">结束时间<input v-model="endTime">
  <button v-on:click="getData">查询</button>
  </div>
  <div class="info_list" v-for="(TC,index) in TClist" :key="TC.rid">
    <tc-info :tc-item="TC" :rank-list="TCRankList" :region="region" :trend-list="trendList"
    :dir-list="moveDirList" v-on:remove="TClist.splice(index, 1)"></tc-info>
  </div>
  </span>
</div>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/lodash.min.js"></script>
<script charset="UTF-8" src="./js/main.js"></script>
</body>
</html>
